<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>仓储物流</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .van-tabs__line {
            width: .22rem !important;
        }

        .warehouse-name span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .warehouse-name span:last-child {
            width: 30%;
            text-align: end;

        }

        .warehouse-name span:first-child {
            width: 70%;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div v-if="warehouseList&&warehouseList.length>0">
            <div class="logistics-item flex-x-s" v-for="(item,index) in warehouseList" :key="index"
                @click="goPage(1, item)">
                <div class="left-mainImg">
                    <img v-lazy="item.imageUrl" alt="">
                </div>
                <div class="right">
                    <div class="warehouse-name flex-x-sb">
                        <span>{{item.title}}</span>
                        <span>{{item.addressName}}</span>
                    </div>
                    <div class="carpet-area">
                        <span>室内</span>
                        <span>{{item.area}} m²</span>
                    </div>
                    <div class="carpet-area">
                        <span>距离：</span>
                        <span>{{item.countDistance}}</span>
                    </div>
                    <div class="r-end">
                        <span v-if="item.price === null || item.price === ''">
                            面议
                        </span>
                        <span v-else>
                            <span class="money" v-if="item.price<10000">¥</span>{{item.price}} {{item.unitName}}
                        </span>
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/kf.png" alt="">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/phone.png" alt="" @click.stop="call(item.phone)">
                    </div>
                </div>
            </div>
            <div class="no-more" v-if="!hasNext">没有更多了</div>
        </div>
        <div v-else class="collect-empty">
            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
            <div>暂无内容～</div>
        </div>
        <div class="peijianshangcheng">
            <div class="release" @click="goEditPage">
                <div class="release-icon"></div>
                <div class="release-text">发布</div>
            </div>
        </div>
        <van-popup v-model="show" position="right" :style="{ height: '100%',width:'77%' }">
            <div class="screen-condition">
                <div>{{conditionName}}</div>
                <div class="screen-condition-list flex-x-s flex-wrap">
                    <div class="screen-condition-item" v-for="(item,index) in conditionList" :key="index"
                        :class="{active:index == conditionCurIndex}" @click="selectCondition(item,index)">
                        {{item.val}}
                    </div>
                </div>
            </div>
            <div class="screen-confirm" @click="confirm">确定</div>
        </van-popup>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>

    <script src="../../script/vant.min.js"></script>
    <script src="../../script/swiper.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script>
        apiready = function () {
            imgLazyLoad();
            api.addEventListener({
                name: 'showFilterBox'
            }, function (ret, err) {
                vm.select(ret.value.index)

            });
            vm = new Vue({
                el: '.app',
                data() {
                    var title = "1";
                    return {
                        warehouseList: [],
                        show: false,
                        conditionIndexObj: {
                            cityIndex: 0,
                            areaIndex: 0,
                            typeIndex: 0,
                        },
                        conditionList: [],
                        conditionName: '',
                        conditionCurIndex: 0,
                        wxIndex: 0,
                        listLogistics: [],
                        filterArr: [],
                        queryInfo: {
                            type: title,
                            areaIds: [],
                            ids: [],
                            keyword: "",
                            location: "",
                            maxArea: "",
                            minArea: "",
                            orderBy: "",
                            types: "",
                            pageNum: 1,
                            pageSize: 10,
                            status: 1,
                        },
                        objectOption: {
                            listArea: [{
                                id: -1,
                                val: '全部'
                            }, {
                                id: 1,
                                val: '0-50m²'
                            }, {
                                id: 2,
                                val: '50-100m²'
                            }, {
                                id: 3,
                                val: '100m²以上'
                            },], // 面积
                            listType: [], // 类型
                        },
                        authStatus: {
                            merchant: -1,
                            personal: -1
                        },
                        hasNext: false,
                    }
                },
                created() {


                },
                mounted() {
                    // var location = $api.getStorage('location_home') || {}
                    var location = api.getPrefs({
                            sync: true,
                            key: 'location_home'
                        })||{}
                    if(location){
                        this.queryInfo.location = JSON.parse(location).location;
                    }
                    this.initStorehouseList();
                    this.getListOptions(6);
                    this.getAuthorizationStatus()

                },
                filters: {
                    getMinDistance(item) {
                        var departureLocation = item.departureLocation;
                        var destinationLocation = item.destinationLocation;
                        if (destinationLocation == null || destinationLocation == null) return;
                        var distance = getDistance(departureLocation.lat, departureLocation.lon, destinationLocation.lat, destinationLocation.lon)
                        return distance / 1000;
                    }
                },
                methods: {
                    getAuthorizationStatus() {
                        let vm = this
                        mime("getAuthorizationStatus")(function (ret) {
                            vm.authStatus.merchant = ret.data.merchant
                            vm.authStatus.personal = ret.data.personal
                        })
                    },
                    getListTags(type) {
                        var vm = this;
                        release('getListTags')(type, function (ret) {
                            ret.data.unshift({
                                id: -1,
                                name: '全部'
                            })
                        })
                    },
                    getListOptions(type) {
                        var vm = this;
                        release('getListOptions')(type, function (ret) {
                            vm.objectOption.listType = ret.data
                            vm.objectOption.listType.unshift({
                                id: "",
                                val: '全部'
                            })
                        })
                    },

                    /**
                     * 初始化仓储列表
                     */
                    initStorehouseList() {
                        var vm = vm || this;
                        vm.queryInfo.type = vm.title;
                        if (vm.queryInfo.location) {
                            var location = vm.queryInfo.location.split(',')

                        }
                        index.logistically("getStorehouseList")(vm.queryInfo, function (ret) {
                            ret.data.list.map(item => {
                                if (vm.queryInfo.location) {
                                    var countDistance = getDistance(location[1], location[0], item.location.lat, item.location.lon)
                                    countDistance = (Number(countDistance) / 1000).toFixed(1)
                                    item.countDistance = countDistance > 500 ? '500km 以上' : countDistance + 'km'
                                }
                            })
                            if (vm.queryInfo.pageNum == 1) {
                                vm.warehouseList = ret.data.list;
                            } else {
                                vm.warehouseList = vm.warehouseList.concat(ret.data.list);
                            }
                            console.log('仓储列表:', JSON.stringify(vm.warehouseList));
                            vm.hasNext = ret.data.hasNext;
                        });
                    },
                    select(index) {
                        if (index == 0) {
                            api.openWin({
                                name: 'area_select_win',
                                url: '../select/area_select_win.html',
                                bounces: false,
                                pageParam: {
                                    key: 'value'
                                }
                            });
                            return false;
                        } else if (index == 1) {
                            this.conditionCurIndex = this.conditionIndexObj.areaIndex
                            this.conditionName = '面积'
                            this.conditionList = this.objectOption.listArea;
                        } else if (index == 2) {
                            this.conditionCurIndex = this.conditionIndexObj.typeIndex
                            this.conditionName = '类型'
                            this.conditionList = this.objectOption.listType;
                        }
                        this.wxIndex = index
                        this.show = true
                    },
                    confirm() {
                        if (this.wxIndex == 0) {
                            return false
                        } else if (this.wxIndex == 1) {
                            this.conditionIndexObj.areaIndex = this.conditionCurIndex
                            this.queryInfo.minArea = this.filterArr[0]
                            this.queryInfo.maxArea = this.filterArr[1]
                        } else if (this.wxIndex == 2) {
                            this.conditionIndexObj.typeIndex = this.conditionCurIndex
                            this.queryInfo.storageTypeIds = this.filterArr[2]
                        }
                        this.show = false
                        this.warehouseList = []
                        this.queryInfo.pageNum = 1;
                        this.initStorehouseList();
                    },
                    selectCondition(item, index) {
                        this.conditionCurIndex = index
                        if (this.conditionName === "面积") {
                            var minArea = '';
                            var maxArea = '';
                            switch (item.val) {
                                case "全部":
                                    break;
                                case "0-50m²":
                                    minArea = 0
                                    maxArea = 50
                                    break;
                                case "50-100m²":
                                    minArea = 50
                                    maxArea = 100
                                    break;
                                case "100m²以上":
                                    minArea = 100
                                    break;
                            }
                            this.filterArr[0] = minArea;
                            this.filterArr[1] = maxArea;
                        } else if (this.conditionName === "类型") {
                            this.filterArr[2] = item.id;

                        }
                    },
                    goPage(type, item) {
                        api.openWin({
                            name: 'warehouse_logistics_detail_win',
                            url: './warehouse_logistics_detail_win.html',
                            bounces: false,
                            pageParam: {
                                type: type,
                                status: item.type,
                                id: item.id,
                                title: item.title
                            }
                        });
                    },
                    goEditPage() {
                        if (!checkToken()) return false;
                        if (vm.authStatus.merchant == 1 || vm.authStatus.personal == 1) {
                            api.openWin({
                                name: 'release_edit_win',
                                url: '../release/release_edit_win.html',
                                bounces: false,
                                pageParam: {
                                    editName: '仓储',
                                    status: 'edit'
                                }
                            });
                        } else {
                            toastMiddle('认证通过后才可进行发布')
                        }

                    },
                    call(phone) {
                        if (!checkToken()) return false;
                        phone = phone.split(',')
                        api.actionSheet({
                            cancelTitle: '取消',
                            buttons: phone
                        }, function (ret, err) {
                            if (ret.buttonIndex > phone.length) return false;
                            api.call({
                                type: 'call_type',
                                number: phone[ret.buttonIndex - 1]
                            });
                        });
                    },
                },
            })

            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function (ret, err) {
                vm.warehouseList = []
                vm.queryInfo.pageNum = 1;
                vm.initStorehouseList();
            });
            // 上拉加载
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function (ret, err) {
                if (vm.hasNext) {
                    vm.queryInfo.pageNum++
                    vm.initStorehouseList();
                }
            });
            api.addEventListener({
                name: 'filterDistrict'
            }, function (ret) {
                vm.queryInfo.areaIds = []
                if (ret.value.city.id > -1) {
                    vm.queryInfo.areaIds = [ret.value.city.id]
                }
                vm.initStorehouseList();
            })
            api.addEventListener({
                name: 'login'
            }, function (ret, err) {
                vm.getAuthorizationStatus()
            })
        }
    </script>
</body>

</html>